<template>
<view class="content">
    <navBar class="nav-bar" title="收藏"></navBar>
    <view class="collect-content-container" :style="{marginTop: navBarHeight + 'px'}">
        <view class="seg-container">
            <view class="seg-item" :class="{'active': seg === '门店'}" @click="seg = '门店'">
                门店
            </view>
            <view class="seg-item" :class="{'active': seg === '文章'}" @click="seg = '文章'">
                文章
            </view>
        </view>
        <scroll-view scroll-y style="width: 100%; padding: 20rpx; flex: 1; overflow: scroll; box-sizing: border-box;" v-if="itemCount > 0">
            <view style="display: flex;flex-direction: column;align-items: stretch;" v-if="seg === '门店'">
                <view class="select-shop-item" v-for="(shop, index) in myShopCollect" :key="index" @click="selectShop(index)">
                    <view class="select-shop-item-name">
                        {{ shop.ShopName }}
                    </view>
                    <view class="select-shop-item-address">
                        {{ shop.Link }} - {{ shop.CorpAddress }}
                    </view>
                </view>
            </view>
            <view style="display: flex;flex-direction: column;align-items: stretch;" v-else>
                <view class="select-shop-item" v-for="(doc, index) in myDocCollect" :key="index" @click="selectDoc(index)">
                    <view class="select-shop-item-name">
                        {{ doc.IntroduceNo }}
                    </view>
                    <view class="select-shop-item-address">
                        {{ bodyContent(doc.IntroduceContent) }}
                    </view>
                </view>
            </view>
        </scroll-view>
		<view class="empty" v-else>
			暂无收藏
		</view>
    </view>
</view>
</template>
<script>
import navBar from '../../widgets/nav_bar.vue'
import { mapState } from 'vuex'
export default {
    components: {
        navBar,
    },
    data() {
        return {
            seg: '门店',
        }
    },
    methods: {
        selectShop(index) {
            uni.navigateTo({
				url: '/pages/search/storeDetail?index=' + index + '&type=collect',
			})
        },
        selectDoc(index) {

        },
		bodyContent(html) {
			const bodyContentMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i)
			if (bodyContentMatch && bodyContentMatch[1]) {
				return bodyContentMatch[1];
			} else {
				return '';
			}
		},
    },
    computed: {
        ...mapState(["navBarHeight","statusBarHeight", "myShopCollect","myDocCollect"]),
		itemCount() {
			if (this.seg == '门店') {
				return this.myShopCollect.length;
			} else {
				return this.myDocCollect.length;
			}
		},
    },
}
</script>
<style>
.content {
	display: flex;
	flex-direction: column;
	height: 100vh;
	box-sizing: border-box;
	font-family: "yshst" !important;
	overflow-y: scroll;
}
.nav-bar {
	position: absolute;
	top: 0;
	left: 0;
}
.collect-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.collect-content-container .seg-container {
    width: 250rpx;
    height: 70rpx;
    background-color: white;
    border-radius: 10rpx;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin-bottom: 15rpx;
}
.seg-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seg-item.active {
    background-color: #50c0f9;
    color: white;
}
.select-shop-item {
    /* height: 80rpx; */
    margin-top: 15rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.select-shop-item-name {
    font-size: 35rpx;
    /* color: aquamarine; */
}
.select-shop-item-address {
    font-size: 30rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    color: #565656;
}
.empty {
	width: 100%;
	padding: 20rpx;
	padding-top: 150rpx;
	flex: 1;
	overflow: scroll;
	box-sizing: border-box;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>